<template>
  <div class="cookbookSearchItem" @click="toCookbook()">
    <div
      class="left"
      :style="{
        backgroundImage: `url(${item.r.p})`,
      }"
    ></div>
    <div class="right">
      <div class="title">{{ item.r.n }}</div>
      <div class="rate" v-if="item.r.rate > 0">
        {{ item.r.rate.toFixed(1) }}分
      </div>
      <div class="recipe_list_tags">
        <div
          class="recipe_list_tag"
          v-for="(recipe_list_tag, index) in item.r.recipe_list_tags.slice(
            0,
            2
          )"
          :key="index"
          :style="{
            color: recipe_list_tag.text_color,
            backgroundColor: recipe_list_tag.background_start_color,
          }"
        >
          {{ recipe_list_tag.text }}
        </div>
      </div>
      <div class="author">
        <div class="avatar">
          <van-image round width="18px" height="18px" :src="item.r.a.p" />
        </div>
        <div class="nickname">{{ item.r.an }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";

const props = defineProps(["item"]);

const toCookbook = () => {
  // console.log("toCookbook");
  router.push({
    path: "/cookbook",
    query: { id: props.item.r.id, user_id: props.item.r.a.id },
  });
};
</script>

<style lang="scss" scoped>
.cookbookSearchItem {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;

  .left {
    height: 122px;
    width: 174px;
    flex-shrink: 0;
    border-radius: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .left {
    height: 122px;
    width: 174px;
    flex-shrink: 0;
    border-radius: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 120%;
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;

    .title {
      font-size: 14px;
      margin-bottom: 8px;
    }

    .rate {
      font-size: 12px;
      margin-bottom: 5px;
    }

    .recipe_list_tags {
      display: flex;
      flex-wrap: nowrap;
      margin-bottom: 5px;
      overflow: hidden;

      .recipe_list_tag {
        border-radius: 5px;
        font-size: 12px;
        padding: 0 5px;
        line-height: 18px;
        flex-shrink: 0;
        margin-right: 5px;
      }
    }

    .author {
      display: flex;
      align-items: center;

      .avatar {
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }

      .nickname {
        line-height: 18px;
        font-size: 14px;
        color: #999;
        width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
